<template>
  <transition name="fade">
    <!-- 这里的mask-closable是规定是否点击蒙层关闭蒙层，并且下方的mask-click事件是用来处理这个关闭事件 -->
    <!-- 其中的type类型是用来设定class类名的，这里设置type为shop-cart-list，则会自动生成.cube-shop-cart-list：则比如这里设置这个cube-popup的type为shop-cart-list，则在后面就可以设置 .cube-shop-cart-list 这个类的样式 -->
    <cube-popup
      v-show="visible"
      :mask-closable="true"
      :z-index="90"
      position="bottom"
      type="shop-cart-list"
      @mask-click="maskClick"
    >
      <transition
      name="move"
      @after-leave="onLeave"
      >
        <div v-show="visible">
          <div class="list-header">
            <h1 class="title">购物车</h1>
            <span @click="empty" class="empty">清空</span>
          </div>
          <!-- 设置一个滚动，因为会规定最大高度，然后超过最大高度商品列表栏就会要有滚动效果 -->
          <cube-scroll class="list-content" ref="listContent">
            <ul>
              <li class="food" v-for="food in selectFoods" :key="food.name">
                <span class="name">{{food.name}}</span>
                <div class="price">
                  <span>￥{{food.price*food.count}}</span>
                </div>
                <div class="cart-control-wrapper">
                    <!-- 因为在购物车里也能增减商品，所以这里引入cart-control组件 -->
                    <cart-control @add="onAdd" :food="food"></cart-control>
                </div>
              </li>
            </ul>
          </cube-scroll>
        </div>
      </transition>
    </cube-popup>
  </transition>
</template>

<script>
import CartControl from 'components/cart-control/cart-control'
// 引入公共组件“drop，show，hide”
import popupMixin from 'common/mixins/popup'

// const EVENT_HIDE = 'hide'
const EVENT_LEAVE = 'leave'
const EVENT_ADD = 'add'
const EVENT_SHOW = 'show'

export default {
  mixins: [popupMixin],
  name: 'shop-cart-list',
  props: {
    // 购物车里选择的商品放在selectFoods中，
    selectFoods: {
      type: Array,
      default: () => []
    }
  },
  created() {
    this.$on(EVENT_SHOW, () => {
          this.$nextTick(() => {
          this.$refs.listContent.refresh()
        })
    })
  },
  // 通过data 来控制数据的显隐
  // data() {
  //     return {
  //         visible: false
  //     }
  // },
  methods: {
    // maskClick() {
    //   this.hide()
    // },
    // 开发一个新的事件
    onLeave() {
      this.$emit(EVENT_LEAVE)
    },
    onAdd(target) {
      this.$emit(EVENT_ADD, target)
    },
    // empty 方法调用CubeUI的Dialog组件
    empty() {
      // 在 Dialog 组件中：type表示弹出框类型，这里表示确认框confirm；title表示标题；content表示正文内容
      // $events???
      this.$createDialog({
        type: 'confirm',
        // title: '清空购物车',
        content: '清空购物车吗？',
        $events: {
          confirm: () => {
            this.selectFoods.forEach(food => {
              // 把所有的 food 置为 0
              food.count = 0
            })
            this.hide()
          }
        }
      }).show()
    },
    // --------------------------
    // 要替换为mixins里的写法
    // 原始写法：
    // show() {
    //     this.visible = true
    //     this.$nextTick(() => {
    //       this.$refs.listContent.refresh()
    //     })
    // },
    // hide() {
    //     this.visible = false
    //     // 子组件可以使用 $emit 触发父组件的自定义事件
    //     this.$emit(EVENT_HIDE)
    // },
    maskClick() {
        this.hide()
    }
  },
  components: {
    CartControl
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable'
.cube-shop-cart-list
  bottom 48px
  &.fade-enter, &.fade-leave-active
    opacity 0
  &.fade-enter-active, &.fade-leave-active
    transition all 0.3s ease-in-out
  .move-enter, .move-leave-active
    transform translate3d(0, 100%, 0)
  .move-enter-active, .move-leave-active
    transition all 0.3s ease-in-out
  .list-header
    height 40px
    line-height 40px
    padding 0 18px
    background $color-background-ssss
    .title
      float left
      font-size $fontsize-medium
      color $color-dark-grey
    .empty
      float right
      font-size $fontsize-small
      color $color-blue
  .list-content
    padding 0 18px
    max-height 217px
    overflow hidden
    background $color-white
    .food
      position relative
      padding 12px 0
      box-sizing border-box
      .name
        line-height 24px
        font-size $fontsize-medium
        color $color-dark-grey
      .price
        position absolute
        right 90px
        bottom 12px
        line-height 24px
        font-weight 700
        font-size $fontsize-medium
        color $color-red
      .cart-control-wrapper
        position absolute
        right 0
        bottom 6px
</style>
